<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>{{ title }}</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>
<div class="header-transparent-state" style="background: linear-gradient(to right,#1fb5ff,#008dff)"></div>
<ion-content class='personal-manager no-header'>
    <div class='top'>
        <div class='person-img'>
            <div [ngStyle]='person.imgStyle'></div>
        </div>
        <div class='info'>
            <div class='person-info'>
                <span>{{user.userName}}</span>
                <ion-icon name="heart-empty" style="font-size:18px;color: #fff;margin-left:20px;"></ion-icon>
                <label>{{'6'}}</label>
            </div>
            <div class='location'>
                <ion-icon name="ios-pin" style="color: #fff;font-size: 10px;width: 11px;"></ion-icon>
                <span>{{address || '- -'}}</span>
            </div>
        </div>
        <div class="state" (click)='showPopover()'>
            <img src='assets/imgs/gallery/SVG/17165.svg'>
            <span>{{punchStatus}}</span>
            <ion-icon name="ios-arrow-down" style="color: #fff;font-size: 10px;width: 10px;line-height: inherit;"></ion-icon>
        </div>

        <div class='tab-switch'>
            <span [ngClass]='{"selected":selectTabIndex == 0}' (click)='selectTab(0)'>个人</span>
            <span [ngClass]='{"selected":selectTabIndex == 1}' (click)='selectTab(1)'>团队</span>
        </div>
    </div>

    <pm-leader *ngIf='selectTabIndex == 1'></pm-leader>
    <pm-staff *ngIf='selectTabIndex == 0'></pm-staff>
</ion-content>